<!--  -->
<template>
  <div class="w-full ScreenBox px-3 py-1" :style="{ height: height }" :class="bg">
    <div class="title text-center pointer-events-none">{{ title }}</div>
    <div class="body" >
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  title: string
  height?: string
  bg?: 'bg1' | 'bg2' | 'bg3'
}
withDefaults(defineProps<Props>(), {
  title: '标题',
  height: '32%',
  bg: 'bg1'
})
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.ScreenBox {
  --title-height:32px;
  .title{
    font-family: 'AlibabaPuHuiTi-3-75-SemiBold';
    font-size: 18px;
    height:var(--title-height)
  }
  .body{
    height:calc(100% - var(--title-height));
  }
}
  .bg1 {
    background: url(@/assets/box_1.png);
    background-size: 100% 100%;
  }
  .bg2 {
    background: url(@/assets/box_1.png);
    background-size: 100% 100%;
  }
  .bg3 {
    background: url(@/assets/box_1.png);
    background-size: 100% 100%;
  }
</style>
